<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .loading-mask {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: transparent;
        }

        .loading-text {
            color: #56055b;
            font-size: 100px;
        }

        @keyframes upDown {
            0% {
                transform: translateY(0px);
            }
            20% {
                transform: translateY(-24px);
            }
            40%, 100% {
                transform: translateY(0px);
            }
        }

        .loading-text span {
            display: inline-block;
            animation: upDown 1.5s ease-in-out infinite;
            animation-delay: calc(.1s * var(--i));
        }
    </style>
</head>
<body>

<div class="loading-mask">
    <div class="loading-text">
        <span style="--i:1">W</span>
        <span style="--i:2">E</span>
        <span style="--i:3">L</span>
        <span style="--i:4">C</span>
        <span style="--i:5">O</span>
        <span style="--i:6">M</span>
        <span style="--i:7">E</span>
    </div>
</div>
</body>
</html>